<template>
    <div>
        <nav-header>
            <template v-slot:title>订单列表</template>
        </nav-header>
        <nav-tab :data="navData" @handle="handleTab"></nav-tab>

        <keep-alive>
            <tab-order-warehouse :is="currentTab"></tab-order-warehouse>
            <tab-order-payment :is="currentTab"></tab-order-payment>
            <tab-order-receipts :is="currentTab"></tab-order-receipts>
            <tab-order-complaint :is="currentTab"></tab-order-complaint>
            <tab-order-sold :is="currentTab"></tab-order-sold>
        </keep-alive>

    </div>
</template>
<script>
    import NavHeader from "../Layout/NavHeader";
    import NavTab from "../Widget/NavTab";
    import TabOrderWarehouse from "./TabOrderWarehouse";
    import TabOrderPayment from "./TabOrderPayment";
    import TabOrderReceipts from "./TabOrderReceipts";
    import TabOrderComplaint from "./TabOrderComplaint";
    import TabOrderSold from "./TabOrderSold";
    export default {
        components: {
            TabOrderSold,
            TabOrderComplaint, TabOrderReceipts, TabOrderPayment, TabOrderWarehouse, NavTab, NavHeader},
        data() {
            return {
                currentTab: 'TabOrderWarehouse',
                navData: [
                    {
                        label: '仓库',
                        tab: 'TabOrderWarehouse',
                        active: true,
                    },
                    {
                        label: '付款',
                        tab: 'TabOrderPayment',
                        active: false,
                    },
                    {
                        label: '收款',
                        tab: 'TabOrderReceipts',
                        active: false,
                    },
                    {
                        label: '投诉',
                        tab: 'TabOrderComplaint',
                        active: false,
                    },
                    {
                        label: '卖出',
                        tab: 'TabOrderSold',
                        active: false,
                    },
                ]
            }
        },
        created() {
        },
        mounted() {
            let tab = this.$route.query.tab;
            if (tab) {
                this.currentTab = tab;
                this.navData.forEach(function (item) {
                    item.active = false;
                    if (item.tab == tab) {
                        item.active = true;
                    }
                });
            }
        },
        methods: {
            handleTab(datum) {
                this.currentTab = datum.tab;
            }
        },
    }
</script>
<style scoped>


</style>
